<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div>
        <p>单价是:{{price}}</p>
        <p>数量是:{{count}} <button @click="count++">数量累加</button></p>
        <p>总价格是:{{allPrice}}--{{totalPrice}}</p>
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            price: 100,
            count: 2,
            allPrice: 0,
          };
        },
        //watch的使用
        watch: {
          //侦听count的改变,如果count改变就会触发函数
          //watch可以起到侦听的作用,但是如果想要得到一个值,那么必须要先在数据中初始化这个值,然后再赋值
          //watch的重心是侦听!!! computed的重心是得到一个值!!!!
          //所以一般来说 我们通过监听一个或多个属性最终的结果是得到一个值,我们还是要使用计算属性
          //一般来说,我们需要监听某个属性,去做其他的事情,我们可以使用watch
          count() {
            // console.log("count改变了");
            this.allPrice = this.count * this.price;
          },
        },

        //计算属性的使用
        computed: {
          totalPrice() {
            return this.count * this.price;
          },
        },
      });
    </script>
  </body>
</html>
